<template>
  <div class="workstation-card">
    <div class="header">
      <slot name="header"></slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkstationCard',
};
</script>

<style scoped lang="scss">
.workstation-card {
  /* Basic styling for the card */
  display: flex;
  flex-direction: column;
  background-color: rgba(15, 23, 42, 0.7); /* Example background */
  border: 1px solid rgba(44, 117, 255, 0.5); /* Example border */
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  color: white;
  position: relative; /* Needed for absolute positioning of internal elements if required */
  height: 250px; /* Adjust height as per the image */
  width: 45%; /* Adjust width to fit two cards per row with gap */
  justify-content: space-between;

  .header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center; /* Center align the workstation title */
    background: url('../views/lanhu_quanbuxitongfanganer/assets/img/59984fa7725577eec2d9ebd86a74857c.png') no-repeat center center;
    background-size: 100% 100%;
    padding: 10px 0;
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1; /* Allow content to take available space */
    justify-content: center; /* Center content vertically */
    align-items: flex-start; /* Align content to the start */

    .flex-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between; /* Distribute items with space */
      width: 100%;
    }

    img {
      height: 30px; /* Example size, adjust as needed */
      width: auto;
    }

    span {
      font-size: 28px; /* Adjust font size for numbers */
      font-family: Arial, sans-serif; /* Example font */
      font-weight: bold;
      color: #00FFFF; /* Example color, adjust to match image */
    }

    .text_21, .text_61, .text_79, .text_40, .text_41, .text_4, .text_44, .text_62, .text-group_1, .text-group_2, .text-group_3, .text_39 {
      font-size: 36px; /* Larger font for main numbers */
      font-family: SourceHanSansSC-Heavy;
      font-weight: 900;
      color: rgba(255, 255, 255, 1); /* White for text labels */
    }

    /* Specific adjustments for text alignment and spacing within content slots */
    .text_40, .text_41 {
      margin-left: 20px; /* Adjust for alignment with numbers */
    }

    /* Adjust image styles for proper alignment */
    .image_11, .image_12, .image_13, .image_14, .image_15, .image_16, .image_17, .image_20, .image_22, .image_23, .image_26, .image_28, .image_29, .image_30 {
      width: 40px; /* Example, adjust to match image icons */
      height: 40px; /* Example, adjust to match image icons */
      object-fit: contain;
      margin-right: 10px;
    }
  }
}
</style> 